<template>
	<div class="login-container">
		<div class="logo">
			学习题后台管理系统
		</div>
		<div class="login-wrapper">
			<div class="title">
				用户登录
				<p class="desc">USER LOGIN</p>
			</div>
			<div class="content">
				<i-Form ref="form" :model="formData" :rules="formRules">
					<FormItem prop="username">
						<Input
							class="input"
							v-model="formData.username"
							size="large"
							placeholder="邮箱"
							clearable
						>
							<template slot="prefix">
								<Icon type="ios-mail-open-outline" />
							</template>
						</Input>
					</FormItem>
					<FormItem prop="password">
						<Input
							class="input"
							v-model="formData.password"
							size="large"
							type="password"
							placeholder="密码"
							clearable
						>
							<template slot="prefix">
								<Icon type="ios-lock-outline" />
							</template>
						</Input>
					</FormItem>
					<FormItem>
						<button class="login-btn" size="large" @click.prevent="login">
							登
							<span style="display: inline-block; width: 18px;"></span>
							录
						</button>
					</FormItem>
				</i-Form>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'Login',
	data() {
		return {
			formData: {
				username: 'root@admin.com',
				password: '123456'
			},
			formRules: {
				username: [
					{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					},
					{
						type: 'email',
						message: '请输入正确的邮箱格式',
						trigger: 'change'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			}
		}
	},
	computed: {
		form() {
			return this.$refs['form']
		}
	},
	methods: {
		async login() {
			const ok = await this.form.validate()

			if (!ok) return

			const res = await this.$http.login(this.formData)
			console.log(res)

			if (res.success) {
				this.$Message.success('登录成功')
				this.$router.push({ name: 'home' })
			} else {
				this.$Message.error(res.message)
			}
		}
	}
}
</script>
<style lang="less">
.login-container {
	width: 100%;
	height: 100%;
	background: url('../../assets/login.png') no-repeat;
	background-size: cover;

	.logo {
		position: absolute;
		top: 66px;
		left: 88px;
		font-size: 32px;
		font-weight: 800;
		color: #fff;
	}

	.login-wrapper {
		position: absolute;
		top: 50%;
		right: 80px;
		width: 480px;
		height: 409px;
		text-align: center;
		background-color: #fff;
		box-shadow: 2px 2px 8px 12px #bbb;
		transform: translateY(-50%);
	}

	.content {
		margin-top: 150px;
	}

	.input {
		width: 392px;
		height: 44px;

		input {
			height: 100%;
		}
	}

	.ivu-input-wrapper-large .ivu-input-prefix i {
		line-height: 44px;
	}

	.login-btn {
		width: 391px;
		height: 44px;
		border: none;
		color: #fff;
		font-size: 18px;
		font-weight: 800;
		border-radius: 4px;
		background-color: #4452d5;
	}

	.login-btn:focus {
		outline-color: #717bd6;
	}

	.title {
		position: absolute;
		top: 49px;
		left: 45px;
		font-size: 26px;
		font-weight: 800;
		color: #4452d5;
	}

	.desc {
		font-size: 14px;
		font-weight: normal;
		color: #bbb;
	}
}
</style>
